<template>
  <div class="info">
    <ul>
      <li v-for="(item, index) in text" :key="index" @click="toview(item.path)">
        <el-icon v-if="index == 0"><Avatar /></el-icon>
        <el-icon v-else-if="index == 1"><SetUp /></el-icon>
        <el-icon v-else-if="index == 2"><CloseBold /></el-icon>
        <div>
          {{ item.title }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script >
import { defineComponent } from "vue";

import { useRouter } from "vue-router";

import { ElMessage } from "element-plus";

import LocalCache from "@/utils/cache";

import { infostore } from "../../p-store/info/info";

export default defineComponent({
  components: {},
  setup() {
    const router = useRouter();
    const { text } = infostore();
    //路由跳转
    const toview = (path) => {
      if (path) {
        router.push(path);
      } else {
        LocalCache.removeCache("token");
        ElMessage.success({
          message: "账号成功推出",
        });
        router.push("/main/0");
      }
    };
    return { text, toview };
  },
});
</script>

<style scoped lang="less" >
.info {
  margin-bottom: 10px;
  > ul {
    margin: 0;
    padding: 0;
    > li {
      margin-top: 10px;
      height: 35px;
      display: block;
      list-style: none;
      padding-left: 20px;
      display: flex;
      > div {
        padding-top: 12px;
      }
      /deep/.el-icon {
        font-size: 20px;
        padding-top: 10px;
      }
    }
    > li:hover {
      background-color: #f6f6f6;
    }
  }
}
</style>
